<template>
	<div class="depList">
		<div class="scroll-warp">
			<el-tree
				:data="deps.treeData"
				show-checkbox
				check-strictly
				:expand-on-click-node="false"
				ref="tree"
				node-key="F_DepartmentId"
				:default-expanded-keys="[]"
				:default-checked-keys="value"
				default-expand-all
				:filter-node-method="filterNode"
				:props="defaultProps"
				@check="check"
			>
				<template slot-scope="{ node,data }">
					<div class="custom-tree-item">
						<div class="icon-img">
							<img src="https://oss-oa.ctlne.com/tlbucket/xjr/20221007/1faf999b367149d787ca4da915c917c2.png" />
						</div>
						<div class="label">{{ node.label }}</div>
						<div class="tree-btn" v-if="!node.isLeaf" @click="depSelect(node,data)">全选</div>
					</div>
				</template>
			</el-tree>
		</div>
	</div>
</template>
<script>
import { store } from "../storeData.js"
import { debounce } from "../utils";
export default {
    name: "DepList",
    props: {
        value: {
            type: Array,
            default: () => []
        },
        keyWords: {
            type: String,
            default:""
        }
    },
    data() {
        const deps = store.depData
        return {
            deps,
            defaultProps: {
				children: "children",
				label: "F_FullName"
			}
        }
    },
    watch: {
        value: {
            handler(v) {
                this.$refs.tree.setCheckedKeys(v);
            }
        },
        "keyWords": {
            handler: debounce(function(v){
                //* 过滤数据
               this.$refs.tree.filter(v.trim());
            })
        }
    },
    methods: {
        filterNode(value, data) {
				if (!value) return true;
				return data.F_FullName.indexOf(value) !== -1;
        },
        depSelect(node,data) {
            //* 全选子集和其他数据
            const isCompany = !data.F_DepartmentId
            const isCheckedAll = this.deepChecked(node.childNodes, !node.checked,node.checked);
            if (!isCheckedAll) {
                this.deepChecked(node.childNodes, true, node.checked);
                this.$refs.tree.setChecked(data, true, true);
                isCompany && (node.checked = true);
            } else {
                this.$refs.tree.setChecked(data, false, true);
                isCompany && (node.checked = false);
            }
            this.check();

        },
        deepChecked(childNodes,checked,haAllChecked) {
            childNodes.forEach(item => {
                if (!item.checked) {
                    haAllChecked = false
                }
                this.$refs.tree.setChecked(item.data,checked,true);
                if (item.childNodes) {
                    haAllChecked = this.deepChecked(item.childNodes,checked,haAllChecked);
                }
            });
            return haAllChecked
        },
        check() {
            // console.log(this.$refs.tree.getCheckedKeys().filter((item) => item))
            const selectIds = this.$refs.tree.getCheckedKeys().filter((item) => item);
            this.$emit("input", selectIds);
            this.$emit("select", "Deps", selectIds);
        }
    }

}
</script>
<style lang="scss" scoped>

.depList{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   ::v-deep(.el-checkbox.is-disabled){
    display: none;
   }
   .checkAll{
    height: 40px;
      flex-shrink: 0;
      display: flex;
      box-sizing: border-box;
      padding: 10px 5px;
   }
   .scroll-warp{
      height:100%;
      overflow-y: auto;
      overflow-x: hidden;
      ::v-deep(.el-tree-node__content){
        height: 40px;
        display: flex;
        align-items: center;
      }
      .custom-tree-item{
        display: flex;
        justify-content: space-between;
        flex: 1;
        .icon-img{
            height: 32px;
            width: 32px;
            flex-shrink: 0;
            border-radius:4px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .label{
            display: flex;
            align-items: center;
            flex:1;
            margin-left: 10px;
            margin-right: 10px;
            overflow: hidden;
            width: 0px;
        }
        .tree-btn{
            display: flex;
            align-items: center;
            color:#1282f7;
            user-select: none
        }
      }
   }
}
</style>
